t<template>
  <div class="outbox">
  
    <div class="maptitle">
    <div class="zuo"></div>
    <span class="titletext">就业人数分布图</span>
    <div class="you"></div>
    </div>
    <!-- 地图 -->
    <div ref="chartsDOM" class="outbox-chartsDOM"></div>


  </div>
</template>



<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
import { getChinaMapData, getChinaData } from '@/api/echarts';
import {getEmploymentStatsAndIntent,getProvinceStats} from '@/api/system/EmploymentInfo.js'
const chartsDOM = ref(null);
const barChartDOM = ref(null);
const chartsData = ref([]); // 存储就业数据
const value = ref('2025届'); // 默认选择的年级
const options = ref([]); // 存储获取到的年级数据
let myChart;
let barChart;
const props=defineProps({
  selectedGrade: String
}
)
// 初始化地图
const initChinaMapChart = (dom, data) => {
  myChart = echarts.init(dom);
  myChart.showLoading();
  getChinaMapData().then((res) => {
    myChart.hideLoading();
    echarts.registerMap('China', res.data);
    const option = {
      left: 'center',
      visualMap: {
            seriesIndex:0,
            left: 20,
            bottom: 20,
            pieces: [
                { gte: 1000, label: "1000个以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
                { gte: 600, lte: 999, label: "600-999个" },
                { gte: 200, lte: 599, label: "200-599个" },
                { gte: 50, lte: 199, label: "49-199个" },
                { gte: 10, lte: 49, label: "10-49个" },
                { lte: 9, label: "1-9个" }, // 不指定 min，表示 min 为无限大（-Infinity）。
            ],
            inRange: {
                // 渐变颜色，从小到大
                // FFFFFF,EDF7FD,DBF0FA,C9E8F8,B7E1F6,A5D9F3,93D2F1,81CAEF,6FC2EC,5DBBEA,4AB3E8,38ACE5,26A4E3,1C9AD9,1A8DC7,
                // 1781B5,
                // 1573A2,136790,105A7E,0E4D6C,0C405A,093348,072636,051A24,020D12
                color: [
        "rgba(255, 228, 181, 0.8)", // 淡珊瑚色
        "rgba(255, 182, 193, 0.9)", // 粉玫瑰色
        "rgba(255, 140, 0, 0.9)",   // 橙色
        "rgba(255, 69, 0, 0.9)",    // 橙红色
        "rgba(255, 0, 0, 0.9)",     // 红色
        "rgba(255, 165, 0, 0.9)"    // 橙黄色
    ],
            },
            textStyle: {
                color: "#fff",
            },
        },
      title: {
        // text: '学生就业统计图(/人)',
        left: 'center',
        top: '5%',
        textAlign: 'center',
        textStyle: {
          fontSize: '2em',
          fontWeight: 'bold',
          color: '#000',
        },
      },
      tooltip: {},
      series: [
        {
          name: '当地就业人数',
          type: 'map',
          map: 'China',
          top: '15%',
          left: 'center',
          label: {
            show: false,
          },
          data: data,
          itemStyle: {
            areaColor: '#f0f0f0',
            borderColor: '#000',
            borderWidth: 1,
          },
          textStyle: {
            fontSize: 12,
            color: '#000',
          },
          emphasis: {
            itemStyle: {
              areaColor: '#ff7f50',
            },
          },
        },
      ],
    };

    myChart.setOption(option);
  }).catch((error) => {
    console.error("Error loading China map data:", error);
  });
};

// 初始化横向柱状图
const initBarChart = (dom, data) => {
  barChart = echarts.init(dom);
  const option = {
    right: 'right',
    tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
    title: {
      // text: '就业数据横向柱状图',
      show:false,
      left: 'center',
      top: '5%',
      textStyle: {
        fontSize: 12,
        fontWeight: 'bold',
        color: '#000',
      },
    },
    xAxis: {
      type: 'value',
      name: 'X轴名称', // 这里填写你想展示的X轴名称
      nameLocation: 'middle', // 将名称居中显示
      nameGap: 80, // 调整名称和轴线的距离
      nameTextStyle: {
        color: '#000', // 文字颜色
        fontSize: 12,  // 字体大小
        fontWeight: 'bold' // 字体粗细
      },
      axisLabel: {
        color: '#000', // 刻度标签的颜色
        interval: 0, // 设置刻度标签的显示间隔
        rotate: 45, // 设置坐标轴标签旋转角度
      },
      axisLine: {
        lineStyle: {
          color: '#fff' // 轴线颜色
        }
      },
    
    },
    yAxis: {
      type: 'category',
      // name: 'Y轴名称',
      data: data.map((item) => item.name),
      nameTextStyle: { 
        color: '#000', // 文字颜色
        fontSize: 12,  // 字体大小
        fontWeight: 'bold', // 字体粗细
        lineHeight: 20,
      },
       axisLine: {
        lineStyle: {
          lineHeight: 20,
          color: '#000' // 轴线颜色
        }
      },
      
      axisLabel: {
        color: '#000', // 刻度标签的颜色
        interval: 0, // 设置刻度标签的显示间隔
        rotate: 45, // 设置坐标轴标签旋转角度
    }
    },
    series: [
      {
        data: data.map((item) => item.value),
        type: 'bar',
        itemStyle: {
          color: '#0158be',
        },
        label: {
          show: true,
          position: 'right',
          color: '#fff',
        },
      },
    ],
  };
  barChart.setOption(option);
};

// 更新图表数据
const updateChartData = (selectedGrade) => {
  const selectData = chartsData.value.find((item) => item.name === selectedGrade);
  if (myChart) {
    myChart.setOption({
      series: [{ data: selectData.value }],
    });
  }
  selectData.value.map((item) => {
    if(item.name==null){
      item.name='未跟踪';
    }
    return item;
  });
  if (barChart) {
    barChart.setOption({
      yAxis: {
        data: selectData.value.map((item) => item.name),
      },
      series: [{ data: selectData.value.map((item) => item.value) }],
    });
  }
};

// 组件挂载后获取数据并初始化图表
onMounted(() => {
  window.addEventListener('resize', resizeCharts); // 监听窗口大小变化
  getProvinceStats().then(res=>{
     options.value = res.rows.map((item) => item.name);
    chartsData.value = res.rows.map((item) => ({
      name: item.name,
      value: item.value || [],
    }));
    const initialData = chartsData.value.find((item) => item.name === '2025届');
    // console.log(initialData.value);
    // 将数据中的null值进行更改
    initialData.value.map((item)=>{
        if(item.name==null)
        {
          item.name='未跟踪';
        }
        return item;
    })
    initChinaMapChart(chartsDOM.value, initialData.value);
    initBarChart(barChartDOM.value, initialData.value);
  })
});

// 处理图表自适应
const resizeCharts = () => {
  if (myChart) myChart.resize();
  if (barChart) barChart.resize();
};
watch(() => props.selectedGrade, (newVal) => {
  if (newVal) {
    console.log(newVal);
    updateChartData(newVal);
  }
});
</script>

<style lang="scss" scoped>
.outbox {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 0 30px;
  // align-items: flex-start;
}

.outbox-chartsDOM {
  width: 100%;
  height: 80vh;
  border: 1px solid #00eded;
  box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
  border-radius: 8px;
    border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
}

.outbox-barChartDOM {
  width: 50vw;
  height: 80vh;
  margin-left: 20px;
}

    .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    // padding-top: 10px;
    box-sizing: border-box;
    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }
    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("@/assets/images/xiezuo.png") no-repeat;
    }

    .you {
      background: url("@/assets/images/xieyou.png") no-repeat;
    }
  }
</style>
